<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>到家首页配置</el-breadcrumb-item>
        <el-breadcrumb-item>仅你专享配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">仅你专享配置</div>
      <div class="entirety">
        <div class="search">
          <div class="top">
            <span>房屋面积</span>
            <el-select placeholder="请选择" clearable v-model="areaScopeCode">
              <el-option v-for="item in GoodsInfoList" :key="item.areaScopeCode" :label="item.areaScopeName" :value="item.areaScopeCode">
              </el-option>
            </el-select>
          </div>
          <div class="top">
            <span>适用端</span>
            <el-select clearable v-model="platformType" placeholder="请选择">
              <el-option v-for="item in demandoptions" :key="item.dictCode" :label="item.dictName" :value="item.dictCode">
              </el-option>
            </el-select>
          </div>
          <el-button style="background-color:#fd804c;color: #fff;width: 88px;" size="small" @click="addmini">新增小程序</el-button>
          <el-button style="background-color:#fd804c;color: #fff;width: 75px;" size="small" @click="addapp">新增APP</el-button>
          <el-button style="background-color:#fd804c;color: #fff;" size="medium" @click="demands">查询</el-button>
          <el-button type="warning" size="medium" @click="empty">清空</el-button>
        </div>
      </div>
      <!--  员工列表栏位-->
      <div class="entirety">
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column prop="sort" label="序号" width="120">
            <template slot-scope="scope">
              <div>
                <el-input maxlength="4" show-word-limit v-model="scope.row.sort" placeholder="请输入数字" @blur="isBlur(scope.row)" onkeyup="value=value.replace(/[^\d]/g,'')" type="text"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="materialName" label="套餐名称">
          </el-table-column>
          <el-table-column prop="areaInterval" label="面积区间">
          </el-table-column>
          <el-table-column prop="materialStatus" label="套餐状态">
            <template slot-scope="scope">
              <div>
                {{ scope.row.materialStatus == 1 ? "上架" : "下架" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="platformType" label="适用端">
          </el-table-column>
          <el-table-column prop="materialTop" label="是否顶置">
            <template slot-scope="scope">
              <div>
                {{ scope.row.materialTop == 1 ? "顶置" : "不顶置" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="isDialog(scope.row)" style="color: #fc9e76;" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <div class="left"></div>
          <div class="right">
            <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-size="pageSize" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
      <!-- 新增小程序 -->
      <el-dialog title="新增小程序" :visible.sync="dialogFormVisible" width="30%" @close="closedialong">
        <el-form :model="form" ref="form" label-width="90px" :rules="rules" :label-position="labelPosition">
          <el-form-item label="选择套餐:" prop="goodsInfoCode">
            <el-select v-model="form.goodsInfoCode" clearable placeholder="请选择" style="width: 200px;margin-bottom: 10px;margin-left:10px;">
              <el-option v-for="item in inquireoptions" :key="item.goodsPackageCode" :label="item.goodsPackageName" :value="item.goodsPackageCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适用端:" prop="platformTypeCode">
            <span style="margin-left:12px;">小程序</span>
          </el-form-item>
          <el-form-item label="顶置" prop="overhead">
            <el-switch active-text="开启" inactive-text="关闭" style="margin-left: 12px;" v-model="form.overhead" active-color="#fb8053" inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button style="background-color:#fd804c;color: #fff;" @click="isSubmit('form')">新 增</el-button>
        </span>
      </el-dialog>
      <!-- 新增APP -->
      <el-dialog title="新增APP" :visible.sync="dialogFormVisibles" width="30%" @close="closedialong">
        <el-form :model="former" ref="former" label-width="90px" :rules="ruless" :label-position="labelPosition">
          <el-form-item label="选择套餐:" prop="goodsInfoCodes">
            <el-select v-model="former.goodsInfoCodes" clearable placeholder="请选择" style="width: 200px;margin-bottom: 10px;margin-left:10px;">
              <el-option v-for="item in inquireoptions" :key="item.goodsPackageCode" :label="item.goodsPackageName" :value="item.goodsPackageCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适用端:" prop="platformTypeCode">
            <span style="margin-left:12px">APP</span>
          </el-form-item>
          <el-form-item label="顶置" prop="overhead">
            <el-switch active-text="开启" inactive-text="关闭" style="margin-left: 12px;" v-model="former.overhead" active-color="#fb8053" inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibles = false">取 消</el-button>
          <el-button style="background-color:#fd804c;color: #fff;" @click="isSubmiter('former')">新 增</el-button>
        </span>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog title="编辑" :visible.sync="dialogFormsVisible" width="30%">
        <el-form :model="forms" ref="forms" label-width="90px" :label-position="labelPosition">
          <el-form-item label="选择套餐:" prop="materialContent">
            <el-select v-model="forms.materialContent" placeholder="请选择" style="width: 200px;margin-bottom: 10px;margin-left:10px;">
              <el-option v-for="item in listwes" :key="item.goodsPackageCode" :label="item.goodsPackageName" :value="item.goodsPackageCode">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="适用端:" prop="platformType">
            <el-select v-model="forms.platformType" clearable placeholder="全选" style="width: 200px;margin-bottom: 10px;margin-left:10px;">
              <el-option v-for="item in demandoptions" :key="item.dictCode" :label="item.dictName" :value="item.dictCode">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="适用端:" prop="platformCodes" v-if="platformCode != 'INDEX_MINIAPP'">
            <span style="margin-left:12px">APP</span>
          </el-form-item>
          <el-form-item label="适用端:" prop="platformCode" v-if="platformCode == 'INDEX_MINIAPP'">
            <span style="margin-left:12px">小程序</span>
          </el-form-item>
          <el-form-item label="顶置:" prop="materialTop">
            <el-switch active-text="开启" inactive-text="关闭" style="margin-left: 12px;" v-model="forms.materialTop" active-color="#fb8053" inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormsVisible = false">取 消</el-button>
          <el-button style="background-color:#fd804c;color: #fff;" @click="isSubmits">修 改</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      echos: [],
      listwes: [],
      dialogFormVisible: false,
      dialogFormsVisible: false,
      dialogFormVisibles: false,
      tableData: [],
      labelPosition: "left",
      form: {
        goodsInfoCode: "",
        platformTypeCode: "INDEX_MINIAPP",
        overhead: true
      },
      former: {
        goodsInfoCodes: "",
        platformTypeCode: "INDEX_APP",
        overhead: true
      },
      forms: {
        materialContent: "",
        platformCode: "INDEX_MINIAPP",
        platformCodes: "INDEX_APP",
        id: ""
      },
      platformCode: "",
      areaScopeCode: "",
      platformType: "",
      inquireoptions: [],
      demandoptions: [],
      cityOptions: [],
      GoodsInfoList: [],
      rules: {
        goodsInfoCode: [
          { required: true, message: "请选择商品", trigger: "change" }
        ]
      },
      ruless: {
        goodsInfoCodes: [
          { required: true, message: "请选择商品", trigger: "change" }
        ]
      }
    };
  },
  activated () {
    this.demand();
    this.DetailByPage();
    this.selectAreaHouseList();
  },
  methods: {
    //列表
    DetailByPage () {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/fetchMaterialByPositionId`,
        method: "get",
        params: {
          "bannerConfigListRequest.page": this.pageIndex,
          "bannerConfigListRequest.size": this.pageSize,
          "cmsGoodsInfoConfigListRequest.page": this.pageIndex,
          "cmsGoodsInfoConfigListRequest.size": this.pageSize,
          "cmsPackageConfigListRequest.page": this.pageIndex,
          "cmsPackageConfigListRequest.size": this.pageSize,
          bannerFlag: 1,
          positionType: "99",
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        // console.log("列表", res.data.cmsPackageConfigList);
        this.tableData = res.data.cmsPackageConfigList.list;
        this.total = res.data.cmsPackageConfigList.total;
      });
    },
    //选择套餐miniapp
    inquire () {
      this.$http({
        url: "/cmsadmin/homeService/config/index/V2/selectGoodsPackageList",
        method: "get",
        headers: {
          "platform-type": "miniapp"
        },
        params: {
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        // console.log(res, '选择套餐')
        let filterList = res.filter(item => {
          return item.isAdd != 1;
        });
        this.inquireoptions = filterList;
        // this.listwes = filterList;
      });
    },
    //选择套餐android
    android () {
      this.$http({
        url: "/cmsadmin/homeService/config/index/V2/selectGoodsPackageList",
        method: "get",
        headers: {
          "platform-type": "android"
        },
        params: {
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        // console.log(res, '选择套餐')
        let filterList = res.filter(item => {
          return item.isAdd != 1;
        });
        this.inquireoptions = filterList;
        // this.listwes = filterList;
      });
    },
    //面积范围列表
    selectAreaHouseList () {
      this.$http({
        url: "/cmsadmin/homeService/config/index/V2/selectAreaHouseList",
        method: "get"
      }).then(res => {
        // console.log(res, '面积范围列表')
        this.GoodsInfoList = res;
      });
    },
    //查询适用端
    demand () {
      this.$http({
        url: "/cmsadmin/homeService/config/index/V2/selectPltfmTypeList",
        method: "get"
      }).then(res => {
        // console.log(res.data, '查询适用端')
        this.demandoptions = res.data;
        // console.log(this.demandoptions)
      });
    },
    //序号
    isBlur (e) {
      console.log(e);
      if (e.sort === "" || e.sort < 0) {
        this.$message({
          message: "序号不能为空且大于0",
          type: "warning"
        });
        this.DetailByPage();
      } else {
        this.$http({
          url: "/cmsadmin/homeService/config/index/V2/updateMaterialSort",
          method: "post",
          data: {
            sort: e.sort,
            id: e.id
          }
        }).then(res => {
          if (res.success == 1) {
            this.$message.success("修改成功");
            this.DetailByPage();
          } else {
            this.$message.error(res.errorMsg);
            this.DetailByPage();
          }
        });
      }
    },
    //清空
    empty () {
      this.areaScopeCode = "";
      this.platformType = "";
      this.DetailByPage();
    },
    //查询
    demands () {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/fetchMaterialByPositionId`,
        method: "get",
        params: {
          "bannerConfigListRequest.page": this.pageIndex,
          "bannerConfigListRequest.size": this.pageSize,
          "cmsGoodsInfoConfigListRequest.page": this.pageIndex,
          "cmsGoodsInfoConfigListRequest.size": this.pageSize,
          "cmsPackageConfigListRequest.page": this.pageIndex,
          "cmsPackageConfigListRequest.size": this.pageSize,
          "cmsPackageConfigListRequest.platformTypeCode": this.platformType,
          "cmsPackageConfigListRequest.areaScopeCode": this.areaScopeCode,
          bannerFlag: 1,
          positionType: "99",
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        console.log("列表", res.data.cmsPackageConfigList.list);
        this.tableData = res.data.cmsPackageConfigList.list;
        this.total = res.data.cmsPackageConfigList.total;
        this.$message.success("查询成功");
      });
    },
    //新增小程序
    addmini () {
      this.dialogFormVisible = true;
      this.inquire();
    },
    isSubmit (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.$http({
            url: "/cmsadmin/homeService/config/index/V2/addOrUpdateMaterial",
            method: "post",
            data: {
              cmsInsertPackConfigRequest: {
                goodsPkgCode: this.form.goodsInfoCode,
                materialTop: this.form.overhead == true ? "1" : "0",
                platformTypeCode: this.form.platformTypeCode, //适用端
                positionId: this.$route.query.positionId
              },
              positionType: "99"
            }
          }).then(res => {
            console.log(res, "新增");
            this.dialogFormVisible = false;
            this.$message.success("新增成功");
            this.DetailByPage();
          });
        } else {
          return false;
        }
      });
    },
    //新增APP
    addapp () {
      this.dialogFormVisibles = true;
      this.android();
    },
    isSubmiter (former) {
      this.$refs[former].validate(valid => {
        if (valid) {
          this.$http({
            url: "/cmsadmin/homeService/config/index/V2/addOrUpdateMaterial",
            method: "post",
            data: {
              cmsInsertPackConfigRequest: {
                goodsPkgCode: this.former.goodsInfoCodes,
                materialTop: this.former.overhead == true ? "1" : "0",
                platformTypeCode: this.former.platformTypeCode, //适用端
                positionId: this.$route.query.positionId
              },
              positionType: "99"
            }
          }).then(res => {
            console.log(res, "新增");
            this.dialogFormVisibles = false;
            this.$message.success("新增成功");
            this.DetailByPage();
          });
        } else {
          return false;
        }
      });
    },
    //编辑
    isDialog (e) {
      this.platformCode = e.platformCode;
      this.dialogFormsVisible = true;
      this.forms = e;
      this.echos = e;
      this.echo();
    },
    isSubmits () {
      this.$http({
        url: "/cmsadmin/homeService/config/index/V2/addOrUpdateMaterial",
        method: "post",
        data: {
          cmsInsertPackConfigRequest: {
            goodsPkgCode: this.forms.materialContent,
            id: this.forms.id,
            materialTop: this.forms.materialTop == true ? "1" : "0",
            platformTypeCode: this.forms.platformCode, //适用端
            positionId: this.$route.query.positionId
          },
          positionType: "99"
        }
      }).then(res => {
        console.log(res, "编辑");
        this.dialogFormsVisible = false;
        this.$message.success("修改成功");
        this.DetailByPage();
      });
    },
    //diolong关闭事件
    closedialong () {
      this.form.goodsInfoCode = "";
      this.former.goodsInfoCodes = "";
    },
    //数据回显
    echo () {
      this.$http({
        url:
          "/cmsadmin/homeService/config/index/V2/selectPackageConfigListById",
        method: "get",
        headers: {
          "platform-type":
            this.platformCode == "INDEX_MINIAPP" ? "miniapp" : "android"
        },
        params: {
          id: this.echos.id,
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        // console.log(res)
        let filterList = res.filter(item => {
          return item.isAdd != 1;
        });
        this.listwes = filterList;
        console.log(this.listwes, "数据回显");
      });
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.demands();
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val;
      this.demands();
    }
  }
};
</script>
<style scoped lang="scss">
.block {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
}
.left {
  font-size: 15px;
}
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.search {
  margin-bottom: 0px;
  padding: 10px;
  justify-content: space-around;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-right: 10px;
  width: 280px;
}
.el-select {
  width: 200px;
}
.news {
  margin-left: 38%;
}
.entirety {
  width: 95%;
  margin: 10px;
  border: 10px solid #ebeef1;
  border-radius: 10px;
}
/deep/ .demo-input-suffix {
  margin-left: 1%;
}
/deep/ .el-pagination {
  padding: 10px;
}
/deep/ .el-form-item__label {
  width: 80px;
}
/deep/ .el-pagination__editor {
  width: 55px;
}
/deep/ .el-dialog__body {
  padding-bottom: 0px;
}
.avatar-uploader-icon {
  font-size: 28px;
  border: 1px solid #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
